<template>
  <div id="App">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="首页广告" name="first">
        <h2>首页广告编辑</h2>
        <el-button type="primary" class="myButton" @click="ClickUpload(26)">上传广告
          <i class="el-icon-upload el-icon--right" />
        </el-button>
        <!-- 已存在的广告 -->
        <!-- <Upload /> -->
        <el-table :data="image" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column label="图片" width="120">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(scope.row.imgPath)"
                >
                  <el-image style="width: 100px; height: 100px" :src="scope.row.imgPath" />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="serialNum" width="110" sortable label="显示顺序" />
          <el-table-column prop="link" label="地址链接" width="320" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
              <el-button slot="reference" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
      </el-tab-pane>
      <el-tab-pane label="快车广告" name="second">
        <h2>快车广告编辑</h2>
        <el-button type="primary" class="myButton" @click="ClickUpload(24)">上传广告
          <i class="el-icon-upload el-icon--right" />
        </el-button>
        <!-- 已存在的广告 -->
        <!-- <Upload /> -->
        <el-table :data="image2" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column label="图片" width="120">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(scope.row.imgPath)"
                >
                  <el-image style="width: 100px; height: 100px" :src="scope.row.imgPath" />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="serialNum" width="110" sortable label="显示顺序" />
          <el-table-column prop="link" label="地址链接" width="320" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
              <el-button slot="reference" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
      </el-tab-pane>
      <el-tab-pane label="出租车广告" name="third">
        <h2>出租车广告编辑</h2>
        <el-button type="primary" class="myButton" @click="ClickUpload(25)">上传广告
          <i class="el-icon-upload el-icon--right" />
        </el-button>
        <!-- 已存在的广告 -->
        <!-- <Upload /> -->
        <el-table :data="image3" border style="width: 100%" :default-sort="{prop: 'date', order: 'descending'}">
          <el-table-column label="图片" width="120">
            <template slot-scope="scope">
              <div class="demo-image__preview">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(scope.row.imgPath)"
                >
                  <el-image style="width: 100px; height: 100px" :src="scope.row.imgPath" />
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="serialNum" width="110" sortable label="显示顺序" />
          <el-table-column prop="link" label="地址链接" width="320" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" plain @click="handleEdit(scope.$index, scope.row)"> 编辑 </el-button>
              <el-button slot="reference" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
      </el-tab-pane>
    </el-tabs>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 上传广告 -->
    <el-dialog title="上传广告" :visible.sync="dialogFormVisible" :destroy-on-close="true" @close="addDialogClosed">
      <el-form ref="addRuleForm" :model="form">
        <el-form-item label="图片" :label-width="formLabelWidth">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8000/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            list-type="picture-card"
            :auto-upload="true"
          >
            <img v-if="imageUrl" :src="form.imgPath" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
        <el-form-item label="顺序" :label-width="formLabelWidth">
          <el-input v-model="form.serialNum" autocomplete="off" placeholder="请输入数字" />
        </el-form-item>
        <el-form-item label="链接地址" :label-width="formLabelWidth">
          <el-input v-model="form.link" autocomplete="off" placeholder="请输入内容" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button style="background-color:white;" @click="dialogFormVisible = false">取 消</el-button>
        <el-popover
          placement="bottom"
          title="上传失败"
          width="200"
          trigger="click"
          content="上传的所有内容不能为空"
        >
          <el-button slot="reference" class="myButton" type="primary" @click="determine">确 定</el-button>
        </el-popover>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAdvert, increaseAdvert, updateAdvert, deleteAdvert } from '@/api/advert'
// import Upload from './UpLoadimg.vue'
export default {
  // components: {
  //   Upload
  // },
  data() {
    return {
      // 顶部列表
      activeName: 'first',
      // 上传错误提示
      // visible: false,
      // 上传弹窗
      dialogVisible: false,
      // 图片
      dialogImageUrl: '',
      imageUrl: '',
      // 上传的图片
      url: '',
      // 渲染列表
      clicked: 0,
      image: [],
      image2: [],
      image3: [],
      // 弹窗
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 上传数据表单
      form: {
        serialNum: '',
        link: '',
        imgPath: '',
        modularNum: ''
      },
      formLabelWidth: '120px'
      // // 添加规则
      // addFormRules: {
      //   roleName: [
      //     { required: true, message: '请输入数字', trigger: 'blur' }
      //   ],
      //   roleDesc: [
      //     { required: true, message: '请输入地址链接', trigger: 'blur' }
      //   ],
      //   img: [
      //     { required: true, message: '请选择图片', trigger: 'blur' }
      //   ]
      // }
    }
  },
  created() {
    this.getList()
    console.log(this.image, '001', this.image2, '002', this.image3, '003')
  },
  methods: {
    // 渲染
    getList() {
      this.image = []
      this.image2 = []
      this.image3 = []
      getAdvert().then(response => {
        for (let i = 0; i < response.data.length; i++) {
          if (response.data[i].modularNum === 26) {
            this.image.push(response.data[i])
          } else if (response.data[i].modularNum === 24) {
            this.image2.push(response.data[i])
          } else {
            this.image3.push(response.data[i])
          }
        }
      })
    },
    // 点击上传
    ClickUpload(modularNum) {
      this.form.modularNum = modularNum
      this.dialogFormVisible = true
      this.clicked = 1
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    handleEdit(index, row) {
      this.clicked = 2
      this.form = {
        serialNum: row.serialNum,
        link: row.link,
        imgPath: row.imgPath,
        modularNum: row.modularNum,
        advertisingId: row.advertisingId
      }
      this.imageUrl = row.imgPath
      this.url = row.imgPath
      this.dialogFormVisible = true
      console.log(index, row)
    },
    handleDelete(index) {
      console.log(index.row)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        deleteAdvert(index.row).then(result => {
          if (result.code === 201) return this.$message.error(result.data)
          this.getList()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 点击放大图片
    handlePictureCardPreview(imgPath) {
      this.dialogImageUrl = imgPath
      this.dialogVisible = true
    },
    // 图片上传成功
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data
      this.url = file.url
      this.form.imgPath = res.data
    },
    // 点击取消
    addDialogClosed() {
      this.$refs.addRuleForm.resetFields()
      this.imageUrl = ''
      this.form = {
        serialNum: '',
        link: '',
        imgPath: '',
        modularNum: ''
      }
    },
    // 点击上传数据库
    determine() {
      if (this.form.serialNum === '' || this.form.link === '' || this.form.imgPath === '') {
        this.$alert('上传内容不能有空', '上传失败', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action} `
            })
          }
        })
      } else {
        if (this.clicked === 1) {
          this.$refs.addRuleForm.validate(async value => {
            if (!value) return
            const result = await increaseAdvert(this.form)
            if (result.code === 201) return this.$message.error(result.data)
            this.dialogFormVisible = false
            this.$message.success(result.data)
            this.getList()
          })
        } else if (this.clicked === 2) {
          this.$refs.addRuleForm.validate(async value => {
            if (!value) return
            const result = await updateAdvert(this.form)
            if (result.code === 201) return this.$message.error(result.data)
            this.dialogFormVisible = false
            this.$message.success(result.data)
            this.getList()
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
*{
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
#App {
  width: 80%;
  overflow: hidden;
  margin: 30px auto;
  text-align: center;
  border-radius: 20px;
  justify-content: center;
  border: 2px solid orange;
}
h1 {
  margin-top: 30px;
  text-align: center;
}
h2 {
  color: #777;
  margin-top: 30px;
}
.cell .el-tag {
    margin-right: 0px;
    width: 30px;
    text-align: center;
}
.tabs_box{
  width: 100%;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
  }
  .avatar {
    width: 148px;
    height: 148px;
    display: block;
  }
  button {
    width: 46%;
    height: 30px;
    // margin: 10px;
  }
  .myButton{
    margin: 10px;
    border: orange;
    background-color: orange;
  }
</style>
